<template>
    <div>
        <div style="padding: 10px;" class="test">
            <!--            分页栏-->
            <div style="margin: 10px 0;">

                <el-form  label-width="80px" size="small" style="margin:0 40px;" :rules="rules" :model="form">
                    <el-form-item label="ID" style="display: none">
                        <el-input v-model="form.id" autocomplete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="题目类型">
                        <el-input v-model="form.questionType" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="出题老师">
                        <el-select clearable filterable v-model="form.teacherId" placeholder="请选择">
                            <el-option v-for="item in teacher" :key="item.teacherId" :label="item.teacherName"
                                       :value="item.teacherId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="课程名称">
                        <el-select clearable filterable v-model="form.courseId" placeholder="请选择">
                            <el-option v-for="item in course" :key="item.courseId" :label="item.courseName"
                                       :value="item.courseId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="题干">
                        <el-input v-model="form.questionTitle" autocomplete="off" @focus="focus('questionTitle',form.questionTitle)"></el-input>
                    </el-form-item>
                    <label>选项：</label>
                    <el-form-item label="A">
                        <el-input v-model="form.optionA" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="B">
                        <el-input v-model="form.optionB" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="C">
                        <el-input v-model="form.optionC" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="D">
                        <el-input v-model="form.optionD" autocomplete="off"></el-input>
                    </el-form-item>
<!--                    <el-form-item label="正确答案">
                        <el-input v-model="form.correctAnswer" autocomplete="off"></el-input>
                    </el-form-item>-->
                    <el-form-item label="正确答案">
                        <el-select clearable filterable v-model="form.correctAnswer" placeholder="请选择">
                            <el-option v-for="item in correctAnswer" :key="item.value"
                                       :label="item.value"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="解析">
                        <el-input v-model="form.parse" autocomplete="off" @focus="focus('parse')"></el-input>
                    </el-form-item>

                    <el-form-item label="难度" >
                        <el-rate
                                v-model="form.difficult"
                                :texts = "texts"
                                show-text
                                style="display: inline"
                        >
                        </el-rate>
                        <label style="float: right;margin-right: 50%" >使用状态: 
                            <el-switch
                                    v-model="form.useStatus"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    active-value="1"
                                    inactive-value="0"
                            >
                            </el-switch>
                        </label>



                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="median" type="primary" @click="save">确 定</el-button>
                    <el-button size="median" @click="form = {}">重 置</el-button>
                </div>
            </div>
            <el-dialog  :visible.sync="dialogVisible" width="50%">
                <div>
                    <vue-editor v-model="content" :editor-toolbar="customToolbar" />
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button  type="primary" @click="editorSave" >确 定</el-button>
                    <el-button @click="dialogVisible = false" >取 消</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>

    import request from "../utils/request";
    import {serverIp} from "../../public/config";

    export default {
        name: 'Radio',
        components: {},
        data() {
            return {
                form: {},
                roles: {},
                serverIp: serverIp,
                dialogVisible: false,
                search: '',
                pageSize: 5,
                pageNum: 1,
                total: 20,
                tableData: [],
                teacher: [],
                course: [],
                content:'',
                formType:'',
                correctAnswer: [{value: "A"}, {value: "B"},{value: "C"},{value: "D"}],
                texts: ['很简单', '简单', '一般', '难', '很难'],
                status: [{name: "启用", value: "1"}, {name: "禁用", value: "0"}],
                rules: {
                    adminId: [
                        {required: true, message: '请输入用戶ID', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ]
                },
                customToolbar: [
                    ["bold", "italic", "underline"],
                    [{ list: "ordered" }, { list: "bullet" }],
                    ["image", "code-block"]
                ]

            }
        },
        created() {
            this.getTeacher();
            this.getCourse();
            if (this.$route.params.form) {
                console.log(this.$route.fullPath)
                this.form = this.$route.params.form;
            }
        },
        methods: {
            save() {
                console.log("form:", this.form);
                this.form['createTime'] = new Date(); //设置时间
                if (this.form.id) { // 更新
                    request.post('/question/save', this.form).then(res => {
                        console.log("code:", res.code)
                        if (res.code == '200') {
                            this.$message.success("保存成功")
                        } else {
                            this.$message.error("保存失败")
                        }
                    }).catch((err) =>{
                        this.$message.error(err);
                    })
                } else { //新增
                    request.post("/question/save", this.form).then(res => {
                        console.log(res.data)
                        if (res.code == '200') {
                            this.$message.success("添加成功")
                        } else {
                            this.$message.error("添加失败")
                        }
                    }).catch((err) =>{
                        this.$message.error("添加失败");
                        this.$message.error(err);
                    })
                }
            },
            getTeacher() {
                //请求教师信息数据
                request.get("/teacher/findAll").then(res => {
                    console.log("res:", res);
                    this.teacher = res.data
                })
            },
            getCourse() {
                //请求课程信息数据
                request.get("/course/findAll").then(res => {
                    console.log("res:", res);
                    this.course = res.data
                })
            },
            focus(formType,formValue){
                this.formType = formType
                this.content = formValue;
                this.dialogVisible =true;
            },
            editorSave(){
                this.$message.info(this.content);
                this.form[this.formType] = this.content;
                this.content = '';
                this.dialogVisible = false;
            }



        },

    }
</script>

<style>
    .el-form .el-form-item{
        margin-top:20px;
    }
    .el-input{
        margin-left: 20px;
    }
</style>


